import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import ClassNames from 'classnames';
import { Step,Row,Col,Button,Message,Form,FormGroup,Label,FormControl } from 'tinper-bee';
import './BusinessContact.less';
import { vendorsDanger as danger, vendorsSuccess as success } from 'utils/config.js';
import { editWorkType }  from './worktype.config.js';

export default class BusinessContact extends Component{
  constructor(props){
    super(props);
    this.state = {
      defaultText : this.props.defaultValue,
      text : this.props.defaultValue,
      isEdit :this.props.action == "add" ? false : true,
      disabled : this.props.action == "add" ? false : true,
      changeFlag : this.props.changeFlag,
      pk_group: this.props.pk_group
    }
  }
  componentWillReceiveProps (nextProps) {
    this.setState({
      changeFlag: nextProps.changeFlag,
      defaultText: nextProps.defaultValue
    });
  }
  handlerValue = (e) => {
    let onChange = this.props.onChange;
    if(e.target.value.length > 50){
      danger({'text': '请限制在50个字符！'});
      this.setState({
        text : e.target.value.substring(0, 50)
      });
    } else {
      this.setState({
        text : e.target.value
      });
    }
    if(onChange){
      onChange(e);
    }
  }
  handlerSave = (e) => {
    let onSave = this.props.onSave;
    let _me = this;
    if (this.state.text === '') {
      danger({text: '请输入具体内容！'});
      return ;
    }
    let param = {
        'pk_contacttype': this.props.id,
        'contype_name': this.state.text.trim(),
        'changeFlag': this.state.changeFlag,
        'pk_group': this.state.pk_group,
        'isAjax': 1
    }
    if (this.props.action == 'view') {
      if (param.contype_name.length>50) {
          danger({'text': '请限制在50个字符之内！'});
          return;
        }
      editWorkType(param).
        then(function(res){
          if (res.data.resultCode === 'busi_ex') {
            danger({ 'text': res.data.exMsg });
            _me.setState({
                disabled : false,
                isEdit : false,
                text: _me.state.text
              });
          } else {
            if(onSave){
              onSave({
                text : _me.state.text,
                id : _me.props.id,
                default: _me.props.defaultValue
              }, res.data.result);
              _me.setState({
                disabled : true,
                isEdit : true,
                text: _me.state.text.trim()
              });
            }
          }
        })
    } else {
      if(onSave){
        onSave({
          text : _me.state.text,
          id : _me.props.id,
          default: _me.props.defaultValue
        }, () => {
          _me.setState({
            disabled : false,
            isEdit : false,
            text: ''
          });
        }, () => {
          _me.setState({
            disabled : false,
            isEdit : false
          });
        });

      }
    }
  }
  handlerCancel = (e) => {
    let onCancel = this.props.onCancel;
    if(onCancel){
      onCancel();
    }else{
      this.setState({
        disabled : true,
        isEdit : true,
        text : this.state.defaultText
      });
    }
  }
  handlerEdit = (e) => {
    this.setState({
      disabled : false,
      isEdit : false
    });
  }
  handlerDelete = (e) => {
    let onDelete = this.props.onDelete;
    if(onDelete){
      onDelete({
        id : this.props.id,
        text : this.state.text,
        changeFlag : this.state.changeFlag
      });
    }
  }
  handlerKeyDown = (e) => {
    let onKeyDown = this.props.onKeyDown;
    let _me = this;
    if(onKeyDown){
      onKeyDown(e, () => {
          _me.setState({
            disabled : false,
            isEdit : false,
            text: ''
          });
        }, () => {
          _me.setState({
            disabled : false,
            isEdit : false
          });
        });
      if (e.keyCode == '13') {
        this.setState({
          disabled : false,
          isEdit : false
        });
      }
    }
  }
  render(){
    return (<div className="widget__input">
      <Row>
          <Col md={6} xs={6} sm={6}>
              <FormControl
                autoFocus
                className="no-radius"
                disabled={this.state.disabled}
                onClick={this.handlerInputClick}
                onChange={this.handlerValue}
                onKeyDown={this.handlerKeyDown}
                value={this.state.text}
                ref="myTextInput"
                placeholder="请输入工作联系类型名称" size="lg"/>
          </Col>

          {this.state.isEdit && <div><Col md={2} xs={2} sm={2}  style={{ 'marginRight': '9px' }}>
                <Button onClick={this.handlerEdit} colors="success" className="no-radius disable-btn-edit">
                  <i className="iconfont icon-bianji"></i>
                编辑</Button>
          </Col>
          <Col md={2} xs={2} sm={2}>
                <Button onClick={this.handlerDelete} colors="danger" className="no-radius disable-btn-del">
                  <i className="iconfont icon-shanchu button--width-28"></i>
                删除</Button>
          </Col></div>}

          {this.state.isEdit === false && <div><Col md={2} xs={2} sm={2}  style={{ 'marginRight': '9px' }}>
                <Button onClick={this.handlerSave} colors="success" className="no-radius disable-btn-save" >
                  <i className="iconfont icon-queding button--width-28"></i>
                保存</Button>
          </Col>
          <Col md={2} xs={2} sm={2}>
                <Button onClick={this.handlerCancel} colors="primary" className="no-radius disable-btn-cancel">
                  <i className="iconfont icon-guanbi button--width-28"></i>
                取消</Button>
          </Col></div>}
      </Row>
    </div>)
  }
}

BusinessContact.propTypes = {
  action : PropTypes.oneOf(['add', 'edit','view']),
  onChange : PropTypes.func,
  onDelete : PropTypes.func,
  onSave : PropTypes.func,
  onCancel : PropTypes.func,
  onInputClick : PropTypes.func,
  defaultValue : PropTypes.string,
  showAddItemStatus: PropTypes.bool
}
